<template>
  <div class="about">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="addDialogVisible = true">新增学生</el-button>
        </el-col>
      </el-row>
      <el-table :data="data" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="account" label="Address" />
        <el-table-column prop="tel" label="电话" />
        <el-table-column prop="birthday" label="出生日期" />
        <el-table-column prop="status" label="状态">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.status ==='1'">在校</el-tag>
            <el-tag type="success" v-else>休学</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="class_id" label="班级" />
        <el-table-column label="操作" width="130px">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="addDialogVisible" title="添加学生" width="50%" @close="addDialogClosed">
      <el-form :model="addForm" label-width="120px" ref="addFormRef">
        <el-form-item prop="name" label="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item prop="account" label="account">
          <el-input v-model="addForm.account" />
        </el-form-item>
        <el-form-item prop="tel" label="tel">
          <el-input v-model="addForm.tel" />
        </el-form-item>
        <el-form-item prop="birthday" label="birthday">
          <el-date-picker class="a" v-model="addForm.birthday" type="date" placeholder="Pick a day" />
        </el-form-item>
        <el-form-item prop="status" label="status">
          <el-input v-model="addForm.status" />
        </el-form-item>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addStudent">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑 -->
  <el-dialog v-model="editDialogVisible" title="编辑信息" width="50%" @close="editDialogClosed">
    <el-form :model="editform" label-width="120px" ref="editFormRef">
      <el-form-item label="name">
          <el-input v-model="editform.name" />
        </el-form-item>
        <el-form-item label="account">
          <el-input v-model="editform.account" />
        </el-form-item>
        <el-form-item label="tel">
          <el-input v-model="editform.tel" />
        </el-form-item>
        <el-form-item label="birthday">
          <el-input v-model="editform.birthday" />
        </el-form-item>
        <el-form-item label="status">
          <el-input v-model="editform.status" />
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editUserInfo">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
  data () {
    return {
      data: [],
      addDialogVisible: false,
      addForm: {
        name: '',
        account: '',
        tel: '',
        birthday: '',
        status: ''
      },
      editDialogVisible: false,
      editform: []
    }
  },
  created () {
    // 获取数据
    this.getStudent()
  },
  methods: {
    async getStudent () {
      const { data: res } = await this.$http.get('student.php')
      // console.log(res)
      if (res.code === 0) {
        this.data = res.data
      }
      // console.log(this.data)
      // this.$http({
      //   method: 'post',
      //   url: 'student.php'
      // }).then((res) => {
      //   if (res.data.code === 0) {
      //     this.data = res.data.data
      //   }
      // })
    },
    // 添加用户对话框关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    async addStudent () {
      // this.$router.push({ path: '/addstudent' })
      const data = await this.$http.post('addStudent.php', this.addForm)
      // console.log(data)
      if (data.status !== 200) {
        return ElMessage.error('添加学生失败')
      }
      this.getStudent()
      ElMessage.success('添加学生成功')
      this.addDialogVisible = false
    },
    async removeById (id) {
      // const { data: { code } } = await this.$http.request({
      //   method: 'get',
      //   url: 'http://localhost/deleteStudent.php?id=' + id
      // })
      // if (code !== 0) return
      // alert('删除成功')
      // this.data = this.data.filter((item) => {
      //   return item.id !== id
      // })
      // console.log(
      //   this.data.filter((item) => {
      //     return item.id !== id
      //   })
      // )
      const { data: res } = await this.$http.request({
        method: 'get',
        url: 'deleteStudent.php?id=' + id
      })
      console.log(res)
      if (res.code !== 0) {
        return ElMessage.error('删除学生失败')
      }
      this.getStudent()
      ElMessage.success('删除学生成功')
    },
    async edit (id) {
      // this.$router.push({ path: '/editstudent', query: { id: id } })
      // const { data: res } = await this.$http.get('detailStudent.php?id=' + id)
      // if (res.code !== 0) {
      //   return ElMessage.error('查询学生失败')
      // }
      // this.editForm = res.data[0]
      // console.log(res.data[0])
      // this.editDialogVisible = true
      const { data: res } = await this.$http.get('detailStudent.php?id=' + id)
      if (res.code !== 0) {
        return ElMessage.error('查询学生失败')
      }
      this.editform = res.data[0]
      // console.log(res.data[0])
      this.editDialogVisible = true
    },
    async editUserInfo () {
      const { data: res } = await this.$http.post('editStudent.php', this.editform)
      // console.log(res)
      if (res.code !== 0) {
        return ElMessage.error('添加学生失败')
      }
      this.getStudent()
      ElMessage.success('修改信息成功')
      this.editDialogVisible = false
      // this.$http({
      //   method: 'post',
      //   url: 'http://localhost/editStudent.php',
      //   data: this.editform
      // }).then((res) => {
      //   const data = res.data
      //   console.log(data)
      //   if (data.code === 0) {
      //     alert('编辑成功')
      //   } else {
      //     alert('编辑出错')
      //   }
      // })
    },
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
  .a{
    z-index: 9999 ;
  }
</style>
